<!-- 
  如何修改仓库中的数据（state）：
    1. 直接修改（可以，但是不推荐）
      this.$store.state.xxx = ''
    2. 定义好 mutation 的前提下：
        1. 直接通过 this.$store.commit() 来提交
        2. 使用 mapMutations 辅助函数，将突变函数映射到组件的methods中。然后直接调用映射出来的method就好

  派发 action 的方式：
    1. 直接通过 this.$store.dispatch() 来派发
    2. 通过 mapActions() 辅助函数，将 action 映射到组件的 methods 中，然后直接调用组件映射出来的 method 就好
    
 -->

<template>
  <div>
    <h1>App</h1>
    <p>count: {{ count }}</p>
    <p>msg: {{ msg }}</p>
    <button @click="fn1">修改count</button>
    <button @click="fn2">修改count</button>
    <button @click="fn3">修改count</button>
    <button @click="fn4">count++</button>
    <hr />
    <button @click="fn5">派发动作1</button>
    <button @click="fn6">派发动作2</button>
    <hr />
    <Hello />
  </div>
</template>

<script>
// 从 vuex 中导出辅助函数
import { mapState, mapMutations, mapActions } from "vuex";
import Hello from "./components/Hello.vue";

// 引入 mutation type 常量
import { ADD_COUNT } from "./store/mutationTypes";
export default {
  components: {
    Hello,
  },
  computed: {
    ...mapState(["count", "msg"]),
  },
  methods: {
    ...mapMutations(["changeCount"]),
    ...mapActions(["hello"]),
    fn1() {
      // 1. 直接修改state
      this.$store.state.count = 20;
    },
    fn2() {
      // 2. 通过 this.$store.commit() 提交突变的方式
      this.$store.commit("changeCount", 30);
    },
    fn3() {
      // 3. 调用映射过来的函数方式来修改state
      this.changeCount(40);
    },
    fn4() {
      this.$store.commit(ADD_COUNT);
    },
    fn5() {
      // 1. 提交动作的方式一：this.$store.dispatch()
      this.$store.dispatch("hello", "我的天");
    },
    fn6() {
      // 2. 调用映射出来的函数方式来派发 action
      this.hello("我的地");
    },
  },
  created() {
    console.log("App", this);
  },
};
</script>
